<template>
    <el-pagination
        :background="background"
        v-bind="$attrs"
        :current-page="pager.pageNo"
        :page-size="pager.pageSize"
        :page-sizes="pageSizes"
        :layout="layout"
        class="flex-ju-end mt-20"
        @size-change="$onSizeChange"
        @current-change="$onCurrentChange"
        v-on="$listeners"
    >
    </el-pagination>
</template>
<script>
export default {
    name: "comOcjPager",
    props: {
        page: {
            type: Object,
            default: () => {}
        },
        layout: {
            type: String,
            default: "total, prev, pager, next, sizes, jumper"
        },
        background: {
            type: Boolean,
            default: true
        },
        pageSizes:Array
    },
    data() {
        return {
            pager: {
                pageNo: 1,
                pageSize: 10
            },
            // pageSizes:[10, 50, 100, 200, 500, 1000]
        };
    },
    watch: {
        page(val) {
            this.pager = val;
        }
    },
    methods: {
        // 分页
        $onSizeChange(val) {
            this.pager.pageSize = val;
            this.pager.pageNo = 1;
            this.$emit('change', this.pager);
        },
        $onCurrentChange(val) {
            this.pager.pageNo = val;
            this.$emit('change', this.pager);
        }
    }
};
</script>
<style lang="scss" scoped>
.flex-ju-end {
    display: flex;
    justify-content: flex-end;
}
</style>
